<template>
  <view :class="[displayInfo,'skeleton']" :animation="animationData.data" v-if="show">
	<div
	  class="skeleton-avatar"
	  v-if="avatar"
	  :style="{
		width:imgsize,
		height:imgsize,
		borderRadius:imgarc,
	}"
	/>
	<view class="skeleton-content">
	  <view v-if="title" class="skeleton-content-title" :style="titleInfo" />
	  <view v-for="(item,key) in rowDataInfo" :key="key" class="skeleton-content-row" :style="{width:rowInfo(key)}" />
	</view>
  </view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onMounted,computed,watch} from 'vue'
	let animationData=reactive({
		data:{}
	})
	let imgType=reactive(["circular", "square"])
	let displayType=reactive(["vertical", "horizontal"])
	let show=ref<Boolean>(true)
	let animation = ref(uni.createAnimation({
	  duration: 1000,
	  timingFunction: "linear"
	}));
	const props=defineProps({
		loading:true,// 是否显示--(明面上的意思)
		title:true,// 是否显示标题
		avatar:true,// 是否显示头像
		avatarSize:100,// 头像大小
		isarc:"square",// 头像形状-圆形-方形  //圆形
		titleSize:'50%',// title宽度
		// 标题sytle
		titleStyle: {},
		// 几行
		row: 1,
		// 几行信息
		rowData:'80%',
		// 显示类型-垂直-水平
		display: "horizontal" //默认水平
	})
	// 循环体
	const rowDataInfo=computed(()=>{
	  let rowArr = [];
	  for (let index = 0; index < row; index++) {
		rowArr.push(index);
	  }
	  return rowArr;
	}) 
	// tile修改字符串
	const titleInfo=(()=>{
	  let titlData = "";
	  for (const key in props.titleStyle) {
		titlData += `${key}:${props.titleStyle[key]};`;
	  }
	  return titlData;
	})
	// 头像大小
	const imgsize=(()=>{
	  switch (typeof props.avatarSize) {
		case "number":
		  return `${uni.upx2px(props.avatarSize)}px`;
		  break;
	
		default:
		  return `${uni.upx2px(parseFloat(props.avatarSize))}px`;
		  break;
	  }
	})
	// title宽度
	const titlwidth=(()=>{
	  switch (typeof props.titleSize) {
		case "number":
		  return `${uni.upx2px(props.titleSize)}px`;
		  break;
	
		default:
		  return `${uni.upx2px(parseFloat(props.titleSize))}px`;
	  }
	})
	// 圆形
	const imgarc=(()=>{
	  if (imgType.includes(props.isarc)) {
		if (props.isarc == "square") {
		  return "0%";
		}
		return "50%";
	  }
	  console.error(`输入错误${props.isarc}`);
	  return "0%";
	})
	// 显示类型
	const displayInfo=(()=>{
	  if (displayType.includes(props.display)) {
		return props.display;
	  }
	  console.error(`输入错误${props.display}`);
	  return "horizontal";
	}) 
function rowInfo(key) {
	console.log(1);	
  const rowTypeof = typeof props.rowData;
  switch (rowTypeof) {
	  case 'string':
		  return props.rowData
		  break;
	  case 'object':
		  // 如果没有就默认80%
		  if(!props.rowData[0]){
			return '80%';
		  } 
		  if(!props.rowData[key]){
			key = 0;
		  }
		  // return (props.rowData[key].indexOf('%')>-1)?props.rowData[key]:`${uni.upx2px(parseFloat(props.rowData[key]))}px`;
		  return '80%'
		  break;
  }
}
watch(props.loading,async (loading)=>{
	if (!loading) {
			animation.value.opacity(0).step();
			animationData.data = animation.value.export();
			const time = setTimeout(() => {
			  show.value = false;
			  clearTimeout(time);
			}, 1000);
	}
})
onMounted(()=>{
	console.log(props);
    // animationData.data = animation.value;
}),
</script>

<style lang="scss" scoped>
$bg: #dddddd;

$height: 100upx;

$title-height: 40upx;

.skeleton {
  display: flex;
  padding: 20upx;
  box-sizing: border-box;
  &.vertical {
	flex-direction: column;
	align-items: center;
	.skeleton-content {
	  width: 100%;
	  margin-left: 0;
	  margin-top: 20upx;
	}
  }
  &-avatar {
	background: $bg;
	flex-shrink: 0;
  }

  &-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-left: 20upx;
	overflow: hidden;

	&-title {
	  height: $title-height;
	  width: 50%;
	  background: $bg;
	}

	&-row {
	  width: 80%;
	  height: $title-height;
	  background: $bg;
	  margin-top: 20upx;
	}
  }
}
</style>
